/*
  钟表：canvas画布项目实战
*/
var Watch = /** @class */ (function () {
    function Watch(watchCanvasSlt) {
        this.padding = 10; //画布的留白
        this.watchPlate = document.querySelector(watchCanvasSlt);
        // let watchBox = this.watchPlate.parentNode as HTMLElement;
        this.handCtx = this.resetCanvas(this.watchPlate.parentNode);
        this.ctx = this.watchPlate.getContext("2d");
        this.center = { x: this.watchPlate.clientWidth / 2, y: this.watchPlate.clientHeight / 2 };
        this.radius = this.center.x - this.padding; //表盘半径
        // 初始化画布基础色彩
        this.ctx.fillStyle = "#27487f";
        this.ctx.strokeStyle = "#27487f";
        this.ctx.save(); //保存画布初始状态
    }
    // 重设置画布
    Watch.prototype.resetCanvas = function (canvasParent) {
        //1. 重设表盘画布尺寸
        this.watchPlate.width = canvasParent.clientWidth;
        this.watchPlate.height = canvasParent.clientHeight;
        // 2. 生成表针画布
        var watchHandCav = document.createElement("canvas");
        watchHandCav.width = canvasParent.clientWidth;
        watchHandCav.height = canvasParent.clientHeight;
        watchHandCav.style.zIndex = "100";
        canvasParent.append(watchHandCav);
        return watchHandCav.getContext("2d");
    };
    Watch.prototype.create = function () {
        var _this = this;
        this.createDialPlate();
        setInterval(function () {
            var hms = _this.getNowHms();
            _this.createHand(hms);
            _this.setLedWatch(".ledWatch", hms);
        }, 1000);
    };
    Watch.prototype.getNowHms = function () {
        // 计算时间
        var dt = new Date();
        var hms = {
            H: dt.getHours(),
            h: dt.getHours() % 12,
            m: dt.getMinutes(),
            s: dt.getSeconds()
        };
        return hms;
    };
    // 设置并生成指针
    Watch.prototype.createHand = function (hms) {
        var ctx = this.handCtx;
        ctx.clearRect(0, 0, 500, 500);
        // 时针
        ctx.save();
        ctx.translate(this.center.x, this.center.y);
        ctx.rotate((hms.h + hms.m / 60) * 30 * Math.PI / 180);
        ctx.beginPath();
        ctx.moveTo(0, -(this.radius - 150));
        ctx.lineTo(0, 20);
        ctx.lineWidth = 10; //表盘圆线宽
        ctx.stroke();
        ctx.closePath();
        ctx.restore();
        // 分针
        ctx.save();
        ctx.translate(this.center.x, this.center.y);
        ctx.rotate(hms.m * 6 * Math.PI / 180);
        ctx.beginPath();
        ctx.moveTo(0, -(this.radius - 110));
        ctx.lineTo(0, 20);
        ctx.lineWidth = 6; //表盘圆线宽
        ctx.stroke();
        ctx.closePath();
        ctx.restore();
        // 秒针
        ctx.save();
        ctx.translate(this.center.x, this.center.y);
        ctx.rotate(hms.s * 6 * Math.PI / 180);
        ctx.beginPath();
        ctx.moveTo(0, -(this.radius - 70));
        ctx.lineTo(0, 20);
        ctx.strokeStyle = "red";
        ctx.lineWidth = 3; //表盘圆线宽
        ctx.stroke();
        ctx.closePath();
        ctx.restore();
    };
    // 设置：电子表
    Watch.prototype.setLedWatch = function (ledWatchSlt, hms) {
        var canvas = document.querySelector(ledWatchSlt);
        var ctx = canvas.getContext("2d");
        ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
        ctx.beginPath();
        ctx.font = "30px 黑体";
        ctx.fillStyle = "#FFF";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillText(hms.H + ":" + hms.m + ":" + hms.s, canvas.clientWidth / 2, canvas.clientHeight / 2);
    };
    // 设置表盘:盘+刻度+数字
    Watch.prototype.createDialPlate = function () {
        var ctx = this.ctx;
        // 画表盘
        ctx.save();
        ctx.beginPath();
        ctx.arc(this.center.x, this.center.y, this.radius, 0, Math.PI * 2);
        ctx.lineWidth = 5; //表盘圆线宽
        ctx.stroke();
        ctx.fillStyle = "#f5f5f5"; //表盘背景色
        ctx.fill();
        ctx.closePath();
        ctx.restore();
        // 画表中心
        ctx.save();
        ctx.beginPath();
        ctx.arc(this.center.x, this.center.y, 10, 0, Math.PI * 2);
        // ctx.fillStyle = "#000";//颜色
        ctx.fill();
        ctx.closePath();
        ctx.restore();
        // 画刻度
        ctx.save();
        ctx.translate(this.center.x, this.center.y); //二次圆坐标中心，旋转中心
        for (var i = 1; i <= 60; i++) { //60个刻度，每个6度
            // 画一个刻度，每个刻度旋转6度
            ctx.beginPath();
            ctx.rotate(6 * Math.PI / 180);
            ctx.moveTo(0, -this.radius); //刻度线起始位置
            if (i % 5 === 0) {
                ctx.lineWidth = 5; //线宽
                ctx.lineTo(0, -(this.radius - 15)); //刻长   
            }
            else {
                ctx.lineWidth = 2; //线宽
                ctx.lineTo(0, -(this.radius - 10)); //刻长   
            }
            ctx.stroke();
            ctx.closePath();
        }
        ctx.restore();
        // 写刻度数值
        ctx.save();
        ctx.translate(this.center.x, this.center.y);
        for (var i = 1; i <= 12; i++) { //12个数，每个30度
            // 画一个刻度，每个刻度旋转6度
            ctx.beginPath();
            ctx.rotate(30 * Math.PI / 180);
            // ctx.fillStyle = "#000";//不定义使用默认
            ctx.font = "20px 黑体";
            ctx.textAlign = "center";
            ctx.textBaseline = "top";
            ctx.fillText(String(i), 0, -(this.radius - 20));
            ctx.closePath();
        }
        ctx.restore();
    };
    return Watch;
}());
(new Watch(".watchPlate")).create();
